<html>
<head>
    <style type="text/css">
        html {
            font-size: 62.5%;
        }
        body {
            position:relative;
            margin: 0;
            padding-bottom:14.4rem;
            font-family:Verdana, Arial, '宋体'
        }
        #main-content {
            width: 100%;
            position:absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            padding-bottom:4.5rem
        }
        .marketing-dialog-box {
            display:none;
            position:relative;
            z-index:2001
        }
        .marketing-dialog-box>div {
            position:fixed;
            left:5%;
            top:0;
            right:5%;
            background:white;
            text-align:center;
            padding:2rem;
            z-index:10
        }
        .marketing-dialog-box>div>img {
            max-width:80%;
            margin-top:1rem
        }
        .marketing-dialog-box:before {
            content:'';
            position:fixed;
            background-color:#000;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity:0.7
        }
        .hide-dialog { 
            display:block;
            position:absolute;
            top:0;
            right:0;
            font-size:2.4rem;
            transform:rotate(45deg);
            -ms-transform:rotate(45deg); 	
            -moz-transform:rotate(45deg); 	
            -webkit-transform:rotate(45deg); 
            -o-transform:rotate(45deg);
            padding:1.5rem
        }
        #marketing-tool-bar {
            width: 100%;
            font-size:1.4rem;
            background: white;
            border-top:1px solid #f0f0f0;
            position: fixed;
            bottom: 0;
            z-index: 2000;
            padding:1rem 0
        }
        #third-party-content {
            position: absolute;
        }
        .tool-bar-left>span{
            margin-right:2rem;
            float:left;
            display:flex;
            align-items:center;
            cursor:pointer
        }
        .left-icon{
            height:2.4rem;
            line-height:2.4rem;
            margin-right:1rem
        }
        .container{
            width:95%;
            margin:0 auto
        }
        .tool-bar-right{
            float:right;
        }
        .avatar{
            display:block;
            position:relative;
            width:5.5rem;
            height:2.4rem
        }
        .avatar img{
            position:absolute;
            left:0;
            bottom:-0.2rem;
            width:5.5rem;
            height:5.5rem;
            border-radius:50%
        }

        .heart-shape{
        position: relative;
        width: 20px;
        height: 20px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: rgba(212,0,0, 1);
    }
    .heart-shape:before,
    .heart-shape:after{
        position: absolute;
        width: 20px;
        height: 20px;
        content: '';
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: rgba(212,0,0, 1);
    }
    .heart-shape:before{
        bottombottom: 0px;
        left: -9px;
    }
    .heart-shape:after{
        top: -9px;
        rightright: 0px;
    }

	.heart-shape
	{
        -webkit-animation-name: move;
        -moz-animation-name: move;
        -ms-animation-name: move;
        -o-animation-name: move;   
        animation-name: move;
        -webkit-animation-duration: 500ms;
        -moz-animation-duration: 500ms;
        -ms-animation-duration: 500ms;
        -o-animation-duration: 500ms;
		animation-duration: 500ms;
		-webkit-animation-play-state:running;
        -moz-animation-play-state:running;
        -ms-animation-play-state:running;
        -o-animation-play-state:running;
        animation-play-state:running;
	}

	@-webkit-keyframes move
    {
        0%{opacity:1; bottom: 20px;}
        100% {opacity:0.1;bottom: 170px;}
    }
    @-moz-keyframes move
    {
        0%{opacity:1; bottom: 20px;}
        100% {opacity:0.1;bottom: 170px;}
    }
    @-ms-keyframes move
    {
        0%{opacity:1; bottom: 20px;}
        100% {opacity:0.1;bottom: 170px;}
    }
    @-o-keyframes move
    {
        0%{opacity:1; bottom: 20px;}
        100% {opacity:0.1;bottom: 170px;}
    }
    @keyframes move
    {
        0%{opacity:1; bottom: 20px;}
        100% {opacity:0.1;bottom: 170px;}
    }


    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5, user-scalable=no" />
</head>
<body>
    <div id="main-content">
        <iframe id="third-party-content" src="about:blank" style="width:100%;height:100%;" frameborder="0"></iframe>
    </div>
    <div class="marketing-dialog-box" id="marketing-dialog-box">
        <div id="marketing-dialog" style="visibility:hidden">
            <!--<h1>创建自己的工具栏</h1>-->
            <!--<h3>关注公众号socialbillboards</h3>-->
            <h3>长按二维码关注我</h3>
            <img id="qrcode" src="<%= wall.qr_code %>" />
            <span class="hide-dialog" id="hide-dialog">+</span>
        </div>
    </div>
    <div id="marketing-tool-bar">
        <div class="container" style="text-align:center; font-size:1rem; line-height:2.2rem;">
            <div id="heart-shape" style="margin-left:2px;position:fixed; bottom: 20px; display: flex;"></div>
            <div class="tool-bar-left">
                <span id="like"><img class="left-icon" src="/dashboard/images/mkprobe/heart-o.png" /><span id='like-count'><%- actions && actions.like && actions.like.like_count || 0 %><span></span>
            </div>
            <span style="color:#999; text-align:center" id="show-dialog">
                Powered by Parllay 跨屏朋友圈
            </span>
            <div class="tool-bar-right">
                <a onclick="trackConversion('<%= wall.url %>')" href="#" class="avatar">
                    <img src="<%= wall.logo %>" />
                </a>
            </div>
        </div>
    </div>

    <script type="application/javascript">
        //qrcode dialog
        document.getElementById('show-dialog').addEventListener('click',function(){
            document.getElementById('marketing-dialog-box').style.display='block';
            var dialog=document.getElementById('marketing-dialog');

            if(dialog.style.visibility=='hidden'){
                var height=dialog.scrollHeight,
                    bodyHeight=document.body.scrollHeight;

                dialog.style.visibility='visible';
                dialog.style.marginTop=(bodyHeight-height)/2+'px';
            }
        });

        document.getElementById('hide-dialog').addEventListener('click',function(){
            document.getElementById('marketing-dialog-box').style.display='none';
        });

        function doJSONP(action, data, callback) {
            var endpoint = '/track/<%= wall.id %>/<%= asset_id %>/' + action + '?callback=' + callback + (data ? "&data=" + data : "");
            var script = document.getElementById('track-script');
            if (!script) {
                script = document.createElement('script');
                document.body.appendChild(script);
            }

            script.type = 'application/javascript';
            script.src = endpoint;
        }

        function doAction(action, data, callback) {
            var functionName = "_" + Math.round(Math.random() * 1000000000000000).toString(36);
            window[functionName] = function(result) {
                switch(action) {
                    case 'like':
                        if (result.success) {
                            document.getElementById('like-count').innerText = result.data;
                            toggleAnimationClass('heart-shape', 'heart-shape');
                        }
                        break;
                }

                callback && typeof callback === 'function' && callback();
            };

            doJSONP(action, data, functionName);

        }

        function trackConversion(url) {
            doAction('conversion', null, function() {
                window.location.href = url;
            });
        }

        var thirdPartyContent = document.getElementById("third-party-content");
        thirdPartyContent.addEventListener("load", function() {
            //TODO: send track data back
        });

        document.getElementById("like").addEventListener('click',function(){
            doAction('like');
        });

        var isInAnimation = false;
        function toggleAnimationClass(id, className) {
            if (isInAnimation) return;
            var target = document.getElementById(id);
            var hasClass = false;
            var classNames = target.className;
            var classes = classNames.split(' ');

            if (classes.indexOf(className) >= 0){
                classes = classes.slice(classes.indexOf(className), 1);
                hasClass = true;
            } else {
                classes.push(className);
                isInAnimation = true;
            }
            target.className = classes.join(' ');

            if (hasClass) return;

            var animationEndEvents = ['webkitAnimationEnd','msAnimationEnd','oAnimationEnd','animationEnd','mozAnimationEnd']

            function animationEnd() {
                isInAnimation = false;
                toggleAnimationClass(id, className);
                animationEndEvents.forEach(function(event) {
                    target.removeEventListener(event, animationEnd);
                });
            }

            animationEndEvents.forEach(function(event) {
                target.addEventListener(event, animationEnd);
            });
        }

        function fetchContent(url, callback) {
            
            if (atob(url.replace(/-/g, '/')).indexOf('mp.weixin.qq.com/s') < 0) {
                return callback(atob(url.replace(/-/g, '/')));
            }
            var xhr = null;

            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var content = this.responseText;
                    content = content.replace(/data-src/g, 'src');
                    content = content.replace(/\r\n/g, ' ');
                    //content = content.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
                    callback('data:text/html;charset=utf-8,' + content);
                }
            }
            xhr.open('GET', '/proxy/' + url + '/<%= wall.id %>');
            xhr.send();
        }

        fetchContent('<%= encoded_url %>', function(url) {
            var thirdPartyFrame = document.getElementById('third-party-content');
            thirdPartyFrame.setAttribute('src', url);
        });
    </script>
    <% if (is_wechat) { %>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        wx.config({
			debug: false,
			appId: '<%= config.appId %>',
			timestamp: <%= config.timestamp %>,
			nonceStr: '<%= config.nonceStr %>',
			signature: '<%= config.signature %>',
			jsApiList: [
				'chooseImage',
				'uploadImage',
				'downloadImage',
				'openLocation',
				'getLocation',
				'onMenuShareTimeline',
            	'onMenuShareAppMessage',
            	'previewImage',
            	'onMenuShareQQ',
            	'onMenuShareWeibo'
			]
		});
		var wxError = "No error";
		wx.error(function(res) {
			wxError = res;
		});
		wx.ready(function() {
			wx.onMenuShareTimeline({
				title: '<%= wall.name %>',
				link: location.href,
				imgUrl: 'http:<%= wall.logo %>',
				success: function () {
					console.log('分享成功')
				},
				cancel: function () {
					console.log('分享失败')
				}
			});
			wx.onMenuShareAppMessage({
				title: '<%= wall.name %>',
                desc: unescape('<%= wall.description %>'),
				link: location.href,
				imgUrl: 'http:<%= wall.logo %>',
				type: '',
				dataUrl: '',
				success: function () {
					console.log('分享成功')
				},
				cancel: function () {
					console.log('分享失败')
				}
			});
			wx.onMenuShareQQ({
	            title: '<%= wall.name %>',
                desc: unescape('<%= wall.desription %>'),
	            link: location.href,
	            imgUrl: 'http:<%= wall.logo %>',
	            success: function () {
	                console.log('分享成功')
	            },
	            cancel: function () {
	                console.log('分享失败')
	            }
	        });
	        wx.onMenuShareWeibo({
	            title: '<%= wall.name %>',
                desc: unescape('<%= wall.description %>'),
	            link: location.href,
	            imgUrl: 'http:<%= wall.logo %>',
	            success: function () {
	                console.log('分享成功')
	            },
	            cancel: function () {
	                console.log('分享失败')
	            }
	        })
		});
    </script>
    <% } %>
</body>
</html>
